<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('sidebar.operator')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('popularizeList.crumbsOne')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('popularizeList.crumbsTwo')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>    
  <!-- -------------搜索查询栏------------------------ -->
  <search 
			:searchData="searchData" 
			@search="search" 
			@putExcel="putExcel" 
			:searchRight="true"
			:outputRight="$store.state.common.permiss.promotionlist.includes('export')"
    ></search>
  <!-- ------------  添加活动  ------------------------ -->
    <div class="list_operation" v-if="$store.state.common.permiss.promotionlist.includes('add')">
      <el-button type="primary" @click="onAdd()">
        +{{$t('popularizeList.edit')}}
      </el-button>
    </div>

  <!-- ------------  优惠券列表  ------------------------ -->
    <div class="table" v-if="true">
      <template>
        <el-table :data="tableData" size="small" stripe>
          <el-table-column align="center" prop="id" :label="$t('popularizeList.id')">
          </el-table-column>
          <el-table-column align="center" prop="position" :label="$t('filter.adType')">
            <template slot-scope="scope">
              <p>{{scope.row.position===1?$t('popularizeList.openScreenAd'):scope.row.position===2?$t('popularizeList.popupAd'):scope.row.position===3?$t('popularizeList.floatAd'):''}}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="pic" :label="$t('popularizeList.pic')">
            <template slot-scope="scope">
              <img :src="scope.row.pic" alt="" width="180" height="180">
            </template>
          </el-table-column>
          <el-table-column align="center" prop="targetUrl" :label="$t('popularizeList.href')">
          </el-table-column>
          <el-table-column align="center" :label="$t('filter.popularizeTime')">
            <template slot-scope="scope">
              <p>{{scope.row.beginTime+'~'+scope.row.endTime}}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="status" :label="$t('filter.status')">
            <template slot-scope="scope">
              <span v-if= "scope.row.status === 1">{{$t('filter.adStatusOptions.no1')}}</span>
              <span v-if= "scope.row.status === 2">{{$t('filter.adStatusOptions.no2')}}</span>
              <span v-if= "scope.row.status === 3">{{$t('filter.adStatusOptions.no3')}}</span>
              </template>
          </el-table-column>
          <el-table-column 
            v-if="$store.state.common.permiss.promotionlist.includes('edit')"
            :label="$t('public.operation')">
            <template slot-scope="scope">
              <el-button 
                @click.native.prevent="onEdit(scope.row)"
                type="text"
                size="small">
                {{$t('public.no51')}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  <!-- ------------  添加活动弹框  ------------------------ -->
    <el-dialog :title="$t('popularizeList.addModify')" :visible.sync="dialogFormVisible"  width="660px">
      <el-form :model="form" :rules="rules" ref="addForm" label-width="90px">
        <el-form-item :label="$t('filter.adType')" prop="position">
          <el-select v-model="form.position">
            <el-option :label="$t(item.label)" :value="item.value" v-for="(item, i) in adTypeList" :key="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('public.appPackage')" prop="appPackage">
          <el-select v-model="form.appPackage">
            <el-option :label="item.label" :value="item.value" v-for="(item, i) in apkOption" :key="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('popularizeList.putPic')" prop="pic">
          <el-upload
            class="avatar-uploader"
            :action="imgAction"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-input v-model="form.pic" type="hidden"></el-input>
          <span class="red">{{$t('public.imgLimit')}}</span>
        </el-form-item>
        <el-form-item :label="$t('popularizeList.href')" >
          <el-input v-model="form.targetUrl"></el-input>
        </el-form-item>
        <el-form-item :label="$t('filter.activityDateRange')" prop="dateRange">
          <el-date-picker
            size="small"
            id="datapicker"
            v-model="form.dateRange"
            value-format="yyyy-MM-dd HH:mm:ss" 
            type="datetimerange" 
            range-separator="~" 
            :start-placeholder="$t('public.beginTime')" 
            :end-placeholder="$t('public.endTime')">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{$t('public.no50')}}</el-button>
        <el-button type="primary" @click="save()">{{$t('public.no49')}}</el-button>
      </div>
    </el-dialog>
    
  <!-- ------------  分页显示栏  ------------------------ -->
    <el-row type="flex" justify="end">
      <div class="pages" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          layout="sizes, prev, pager, next, total,->"
          :page-sizes="pagination.pageSizeOptions"
          :page-size="pagination.pageSize"
          @size-change="handleSizeChange"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>
<script>
import putExcel from 'src/mixins/putExcel.js';//导出excel
import getApp from 'src/mixins/getApp.js';//导出excel
export default {
  name: 'popularizeList',
  mixins:[putExcel,getApp],
  data () {
    const searchData=[
      {
        type: 'select',
        attr: 'adType',
        label: 'filter.adType',
        option: this.$store.state.options.adTypeOptions,
        value: '',
        langFlag: true,
      },{
        type: 'select',
        attr: 'status',
        label: 'filter.status',
        option: this.$store.state.options.adStatusOptions,
        value: '',
        langFlag: true,
      },{
        type: 'rangePicker',
        label: 'public.beginTime',
        attr: 'searchTime',
        value: [],
      },{
        type: 'select',
        attr: 'appPackage',
        label: 'public.appPackage',
        option: [],
        value: '',
        langFlag: false,
      }
    ]
    return {
      dialogFormVisible: false,
      pagination: {
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        current: 1,
        total: 0,
      },
      tableData: [],
      searchData:searchData,
      formInline: {},
      imageUrl:'',
      flag:true,
      apkOption:[],
      form: {
        id:'',
        pic: '',
        targetUrl: '',
        position: '',
        appPackage:'',
        dateRange:[]
      },
      imgAction:this.$action.fileUpload,
      adTypeList: this.$store.state.options.adTypeOptions,
      putExcelUrl:this.$action.operation_promotionExport,
      rules: {
          position: [
            { required: true, message: this.$t('login.required'), trigger: 'change' }
          ],
          appPackage: [
            { required: true, message: this.$t('login.required'), trigger: 'change' }
          ],
          pic: [
            { required: true, message: this.$t('login.required'), trigger: 'blur' }
          ],
          dateRange: [
            { required: true, message: this.$t('login.required'), trigger: 'change' }
          ]
      }
    }
  },
  mounted () {
    this.getTableData();
    this.getApp().then(app=>{
      // app.appPackage.push({
      //   label:'ALL',
      //   value:'ALL'
      // })
      this.searchData[3].option=app.appPackage;
      this.apkOption=app.appPackage;
    })
  },
  methods: {
    handleSizeChange (val) {// 每页条数变化时操作
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange (val) { // 分页按钮点击操作
      this.pagination.current = val;
      this.getTableData();
    },
    getTableData () {
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
        param: {
          ...this.formInline
        }       
      }
      this.$axios.post(this.$action.operation_promotionList, option).then(res => {
        if (res.code == 200) {
          let date = new Date();
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      })
    },
    onAdd() {
      this.form.id="";
      this.form.position = "";
      this.imageUrl="";
      this.form.pic ="";
      this.form.targetUrl = "";
      this.form.appPackage = "";
      this.form.dateRange = [];
      this.dialogFormVisible = true;
    },
    onEdit(row) {
        this.form.id = row.id;
        this.form.position = row.position;
        this.imageUrl=row.pic;
        this.form.pic = row.pic;
        this.form.targetUrl = row.targetUrl;
        this.form.appPackage = row.appPackage;
        this.form.dateRange = [row.beginTime, row.endTime];
        this.dialogFormVisible = true;
    },
    save () {
      let option = {
        param: {
          ...this.form,
          beginTime: this.form.dateRange[0],
          endTime: this.form.dateRange[1]
        }       
      }
      let actionUrl=this.form.id?this.$action.operation_promotionUpdate:this.$action.operation_promotionSave;
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$axios.post(actionUrl, option).then(res => {
            if (res.code == 200) {
              this.dialogFormVisible = false;
              this.$globalMsg.success(res.message);
              this.getTableData();
            } else {
              this.$message.error(res.message);
            }
          })
        }
      })
    },
    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.form.pic=res.data;
    },
    search (search) { // 点击查询按钮
      this.formInline = {
        position:search.adType,
        status:search.status,
        addTimeBegin:search.searchTime?search.searchTime[0]:'',
        addTimeEnd:search.searchTime?search.searchTime[1]:'',
        appPackage:search.appPackage
      };
      this.pagination.currentPage = 1;
      this.getTableData();
    }
  }
}
</script>
<style scoped lang="scss">

</style>
